<template>
  <div class="dialog" v-if="modelValue">
    <h1 class="dialog-title">
      <span>标题----{{ title }}</span>
      <span @click="onClick">X</span>
    </h1>
    <div class="dialog-mian">1111</div>
  </div>
</template>
<script lang="ts" setup>
const emit = defineEmits(["update:modelValue", "update:title"]);
const onClick = () => {
  console.log(
    propsData.titleModifiers?.xiaochen,
    "propsData.titleModifiers?.xiaochen="
  );
  console.log(propsData.modelModifiers?.aaa, "propsData.modelModifiers?.aaa=");
  if (propsData.modelModifiers?.aaa) {
    emit("update:title", "标题变了----存在aaa 并且为真");
  } else {
    emit("update:title", "标题变了----不存在aaa");
  }
  emit("update:modelValue", false);
};
type Prop = {
  // v-model 默认值为modelValue
  modelValue: boolean;

  // v-model 默认指令为modelModifiers
  modelModifiers?: {
    aaa: boolean;
  };
  title: string;
  // v-model 自定义指令为 'model'+Modifiers
  titleModifiers?: {
    xiaochen: boolean;
  };
};
const propsData = defineProps<Prop>();
</script>
<style lang="less" scoped>
.dialog {
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 600px;
  border: 1px solid #e5e5e5;
  position: fixed;
  left: 600px;
  top: 100px;
  &-title {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    padding: 0 20px;
    justify-content: space-between;
    span:last-child:hover {
      cursor: pointer;
    }
  }
  &-mian {
    flex: 1;
  }
}
</style>
